<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="s"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<s:imgTable pageName="img">
<jsp:attribute name="headPart">
	<script>
		//plain
		var _selects = ["brand", "brandType", "subBrand"];
		var toInit = true;
		function _populate(level, data){
			var ops = [];
			if(level > 0){
				ops.push("<option value=''>All</option>");
			}
			for(var i = 0; i < data.length; i++){
				var item = data[i];
				ops.push("<option value='"+item+"'>"+item+"</option>");
			}
			var select = $("#" + _selects[level]);
			select.html(ops.join());
			if(toInit === true){
				if(level == 0){
					<c:if test="${not empty brand}">
					select.val("${brand}");
					</c:if>
				}
				else if(level == 1){
					<c:if test="${not empty brandType}">
					select.val("${brandType}");
					</c:if>
				}
				else if(level == 2){
					<c:if test="${not empty subBrand}">
					select.val("${subBrand}");
					</c:if>
				}
			}
			select.change();
		}
	
		function _select(level){
			$.get("getCategories", {
				brand: $("#brand").val(),
				brandType: $("#brandType").val(),
				subBrand: $("#subBrand").val(),
				level: level
			}, function(data){
				_populate(level, data);
			})
		}
		
		$(function(){
			_select(0);
		})
		
		
	</script>
</jsp:attribute>
<jsp:attribute name="formContent">
<div class="row main">
	<form id="searchForm" method="GET" action='index'>
		<div class="form-horizontal">
			<div class="form-group">
				<label class="control-label col-sm-1">Brand</label>
				<div class="col-sm-2">
					<select id="brand" name="brand" class="form-control" onchange="_select(1)">
					</select>
				</div>
				<label class="control-label col-sm-2">Brand Type</label>
				<div class="col-sm-2" onchange="_select(2)">
					<select id="brandType" name="brandType" class="form-control">
					</select>
				</div>
				<label class="control-label col-sm-1">Model</label>
				<div class="col-sm-2" onchange="_select(3)">
					<select id="subBrand" name="subBrand" class="form-control">
					</select>
				</div>
				<div class="col-sm-1 text-right">
			    		<button type="submit" class="btn btn-primary btn-sm">
			    			<span class="glyphicon glyphicon-search"></span> Search
			    		</button>
			    </div>
			</div>
		</div>
	</form>
</div>
</jsp:attribute>
</s:imgTable>
